{% extends 'blog_base.html' %}
{% block title %}
    发布博客
{% endblock %}
{% block head %}
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    <script src="{% static 'jquery/jquery.min.js' %}"></script>
    <script src="{% static 'js/blog_pub.js'%}"></script>
    <style>

        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>
{% endblock %}
{% block main %}
    {% csrf_token %}
    <h1>发布博客</h1>
    <div class="mt-3">
        <form action="" method="POST">
            {% csrf_token %}

            <div class="mb-3">
                <label class="form-label">标题</label>
                <input type="text" name="title" class="form-control">
            </div>

            <div class="mb-3">
                <label class="form-label">分类</label>
                <select name="category" class="form-select" id="category-select">
                    {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>


            <div class="mb-3">
{#                <label class="form-label">内容</label>#}
                <div class="mb-3">
                    <label for="exampleFormControlTextarea1" class="form-label">内容</label>
                    <textarea class="form-control" id="content" rows="3" name="content"></textarea>
                </div>
{#                <input type="text" name="content" id="content">#}

                {#                <div id="editor-wrapper">#}
                {#                    <div id="toolbar-container"><!--工具栏--></div>#}
                {#                    <div id="editor-container"><!--编辑器 --></div>#}
                {#                </div>#}
            </div>
            <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
            <script>
                const {createEditor, createToolbar} = window.wangEditor

                const editorConfig = {
                    placeholder: 'Type here...',
                    onChange(editor) {
                        const html = editor.getHtml()
                        console.log('editor content', html)
                        // 也可以同步到 <textarea>
                    }
                }

                const editor = createEditor({
                    selector: '#editor-container',
                    html: '<p><br></p>',
                    config: editorConfig,
                    mode: 'default', // or 'simple'

                })

                const toolbarConfig = {}

                const toolbar = createToolbar({
                    editor,
                    selector: '#toolbar-container',
                    config: toolbarConfig,
                    mode: 'default', // or 'simple'
                })

            </script>
            <div class="mb-3 text-end">
                <button class="btn btn-primary" id="submit-btn">发布</button>
            </div>
        </form>
    </div>

{% endblock %}



